import React,{ Component } from 'react'

// import ReactDOM from 'react-dom'

import { TabBar } from 'antd-mobile';

import Header from '@c/header/Header.jsx'
import Frist from './frist/container/Frist'
import home from '@a/images/home.svg'
import homeb from '@a/images/homeb.svg'
import message from '@a/images/message.svg'
import messageb from '@a/images/messageb.svg'
// import home from '@a/images/mine.svg'
// import home from '@a/images/mineb.svg'

// import Search from '../components/search/Srearch'
// import ZhuanTi from './frist/zhuanti/ZhuanTi'



export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'redTab',
      hidden: false,
      fullScreen: true,
    };
  }



  render () {
    
    return (
      <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
        <TabBar
          tabBarPosition="bottom"
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          <TabBar.Item
            title="首页"
            key="Life"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${home}) center center /  21px 21px no-repeat` }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${homeb}) center center /  21px 21px no-repeat` }}
            />
            }
            selected={this.state.selectedTab === 'blueTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'blueTab',
              });
            }}
            data-seed="logId"
          >
            
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${message}) center center /  21px 21px no-repeat` }}
                />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${messageb}) center center /  21px 21px no-repeat` }}
                />
            }
            title="消息"
            key="Koubei"
            selected={this.state.selectedTab === 'redTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'redTab',
              });
            }}
            data-seed="logId1"
          >
          <Frist></Frist>
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center /  21px 21px no-repeat' }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center /  21px 21px no-repeat' }}
              />
            }
            title="我的"
            key="Friend"
            selected={this.state.selectedTab === 'greenTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'greenTab',
              });
            }}
          >
            <Header title="我的"></Header>
          </TabBar.Item>

        </TabBar>
      </div>
    );
  }
}

